<template>
  <div class="eco-produce-container">
    <!-- 第一部分：大标题 -->
    <div class="title-section">
      <h1 class="title">铅山县生态产品价值实现路径</h1>
    </div>

    <!-- 第二部分：左右子标题 -->
    <div class="subtitle-section">
      <!-- 左侧内容：物质供给服务 -->
      <h2 class="gradient-title">物质供给类生态产品价值</h2>

      <!-- 右侧内容：文化旅游 -->
      <h2 class="gradient-title">文化服务类生态产品价值</h2>
    </div>

    <!-- 第三部分：展示区域 -->
    <div class="display-section">
      <!-- 左侧空盒子 -->
      <div class="empty-box">
        <div class="left-content">
          <router-link to="/regionalPublicBrand/page01">
            <styled-image-text text="发展绿色生态工业"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page02">
            <styled-image-text text="打造数字农业产业园"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page03">
            <styled-image-text text="培养铅山区域公用品牌"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page04">
            <styled-image-text text="推进生态产品认证体系建设"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page05">
            <styled-image-text text="健全区域公用品牌运营管理体系"  />
          </router-link>

        </div>

      </div>

      <!-- 中间地图展示 -->

      <div class="content-map" style="height: 100%">
        <!--          <produce25-dmap/>-->
        <!--        <eco-produce-map />-->
        <!--        <styled-image-text text="发展绿色生态工业"  />-->
<!--        <img src="@/assets/img/publicBrand/互联网1.jpg" alt="map">-->

        <!--   会动的背景图     -->
        <div class="image-container">
          <!-- 容器 -->
          <div class="image-box base-image">
            <img class="map" src="@/assets/img/picture/map.png" alt="Base Image" />
          </div>
          <div class="image-box middle-image">
            <img class="map" src="@/assets/img/picture/jt.png" alt="Middle Image" />
          </div>
          <div class="image-box top-image">
            <img class="map" src="@/assets/img/picture/lbx.png" alt="Top Image" />
          </div>
        </div>
      </div>


      <!-- 右侧空盒子 -->
      <div class="empty-box">
        <div class="right-content">
<!--          <styled-image-text @click="handleClick('https://example.com')" text="聚力打造铅山文化品牌"  />-->
<!--          <styled-image-text @click="handleRouterClick('/regionalPublicBrand/page01')" text="培育流量经济新业态"  />-->

          <router-link to="/regionalPublicBrand/page06">
            <styled-image-text text="聚力打造铅山文化品牌"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page07">
            <styled-image-text text="培育流量经济新业态"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page08">
            <styled-image-text text="实施“文旅 +” 融合发展战略"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page09">
            <styled-image-text text="激活乡村生态旅游发展动能"  />
          </router-link>
          <router-link to="/regionalPublicBrand/page10">
            <styled-image-text text="全力塑造“万里茶道第一镇”IP 文旅形象"  />
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import StyledImageText from "@/views/regionalPublicBrand/styledImageText.vue";
import {useRouter} from "vue-router";


const router = useRouter();

const handleClick = (url: string) => {
  window.location.href = url;
};

const handleRouterClick = (route: string) => {
  router.push(route);

};
</script>

<style scoped>
.eco-produce-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
}

.title-section {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  background: linear-gradient(180.00deg, rgba(246, 241, 241, 1),rgba(133, 149, 166, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: '优设标题黑', serif; /* 字体设置 */
  font-size: 68px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 10px;

}

.subtitle-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 80px;

}

.gradient-title {
  background: linear-gradient(180.00deg, rgba(246, 241, 241, 1),rgba(133, 149, 166, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: '优设标题黑', serif; /* 字体设置 */
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 10px;
  text-align: justify;
}

.left-content, .right-content {
  width: 100%;
  margin: 50px 0;


}

.service-list, .culture-list {
  list-style: none;
  padding: 0;
}

.service-list li, .culture-list li {
  margin-bottom: 45px;
}

.service-item {
  display: flex;

  margin: 10px 0;
}

.service-icon {
  width: 60px;
  height: 60px;
  margin-right: 10px; /* 设置 icon 和 name 之间的间距 */
}

.service-name {
  /* 可以根据需要添加其他样式 */
  font-family: serif; /* 字体设置 */
  color: rgba(255, 255, 255, 1);
  font-size: 36px;

  text-align: justify;
}

.display-section {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;

}
.empty-box {
  width: 80%;
  background-color: #000;
  overflow-y: auto;
  padding: 10px;

}

.image-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中定位 */
  width: 100%; /* 统一大小 */
  height: 100%;
  overflow: hidden; /* 确保图片不会超出容器 */
  opacity: .5;
  pointer-events: none; /* 阻止所有鼠标事件 */
  -webkit-user-select: none; /* 禁止选择 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* 标准属性 */
}

.map {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%; /* 图片宽度设置为容器宽度 */
  height: auto; /* 保持图片比例 */
  transform: translate(-50%, -50%); /* 居中图片 */
  pointer-events: none; /* 确保图片本身也不能被点击 */
  -webkit-user-select: none; /* 禁止选择图片 */
  -webkit-user-drag: none; /* 禁止拖拽图片 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* 标准属性 */
}

.base-image {
  width: 82%; /* 缩小到80% */
  height: 82%; /* 缩小到80% */
  overflow: visible; /* 确保缩小后的图片可以显示 */
}

.middle-image{
  width: 90%; /* 缩小到80% */
  height: 90%; /* 缩小到80% */
  overflow: visible; /* 确保缩小后的图片可以显示 */
  animation: myfirst2 15s infinite linear;
}
.top-image{
  animation: myfirst 15s infinite linear;
}

/* 顺时针旋转动画 */
@keyframes myfirst {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 逆时针旋转动画 */
@keyframes myfirst2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

</style>
